<template>
    <div class="likes-container">
        <FilterSearch
            :searchItems="searchItems"
            @query="handleQuery"
        />
        <AutoTable
            :tableData="tableData"
            :columns="columns"
            @operate="handleOperate"
        />
        <Pagination
            :total="total"
            :pageSize="pageSize"
            :currentPage="currentPage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>
<script setup>
import './index.css';
import { reactive, ref, markRaw } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { Delete } from '@element-plus/icons-vue'

import FilterSearch from '@/components/filterSearch/index.vue';
import AutoTable from '@/components/autoTable/index.vue';
import Pagination from '@/components/pagination/index.vue';

import { likeApi } from '@/api';

// FilterSearch params
const searchItems = ref([
    {
      label: '用户名称',
      vModel: 'user_name',
      type: 'input',
      initialValue: ''
    },
    {
      label: '点赞类型',
      vModel: 'like_type',
      type: 'select',
      optionsCode: 'collection_type',
      initialValue: ''
    },
]);
const searchCache = ref({});


// AutoTable params
const tableData = ref([]);
const columns = ref([
    {
      label: '用户头像',
      prop: 'user_avatar',
      width: '140px',
      type: 'image',
    },
    {
      label: '用户名称',
      prop: 'user_name',
      width: '140px',
    },
    {
      label: '点赞类型',
      prop: 'like_type',
      type: 'select',
      optionsCode: 'collection_type',
      width: '180px'
    },
    {
      label: '点赞内容',
      prop: 'post_content',
      width: '180px'
    },
    {
      label: '创建时间',
      prop: 'like_time',
      type: 'date',
      format: 'YYYY-MM-DD HH:mm:ss',
      width: '250px'
    },
    {
      label: '操作',
      prop: 'operate',
      fixed: 'right',
      type: 'action',
      align: 'left',
      width: '140px',
      operate: [
        {label: '删除', type: 'delete', icon: markRaw(Delete)}
      ]
    }

]);

// Pagination params
const total = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);

// filterSearch Api
const handleQuery = async (params) => {
    // 调用接口获取数据
    searchCache.value = params;
    const reqParams = {
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        ...params
    }
    const res = await likeApi.getLike(reqParams);
    if (res.code === 200) {
      tableData.value = res.data.rows;
      total.value = res.data.total;
    }
};

// Pagination Api
const handleSizeChange = (size) => {
    pageSize.value = size;
    handleQuery(searchCache.value);
};
const handleCurrentChange = (page) => {
    currentPage.value = page;
    handleQuery(searchCache.value);
};

// AutoTable Api
const handleOperate = (type, row) => {
    if (type === 'delete') {
      handleDelete(row);
    }
}
const handleDelete = async (row) => {
    ElMessageBox.confirm('确定删除该点赞吗？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        const res = await likeApi.deleteLike(row._id);
        if (res.code === 200) {
            ElMessage.success('删除成功');
            handleQuery(searchCache.value);
        }
    });
}
</script>